<!--
 * @Author: 梁 卓
 * @Version: V1.0.0
 * @Date: 2024-02-03 10:57:01
 * @LastEditors: 梁 卓
 * @LastEditTime: 2024-02-04 22:48:17
 * @FilePath: TypicalProductEchartComponent.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-02-03 10:57:01
 * @Description: 
-->
<template>
  <div class="chart">
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="product.productName"
        label="产 品"
        width="auto" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="market.marketName"
        label="农 贸 市 场"
        width="auto" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="price.price"
        label="价 格"
        width="auto">
      </el-table-column>
      <el-table-column
        prop="product.unitMeasure"
        label="单 位"
        width="auto">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

import { getTenTypicalProductPrice } from '@/api/home'

export default {
  props: ['typicalComponentMessage', ],
  data() {
    return {
      tableData: [],
      loading: true,
    }
  },
  watch: {
    typicalComponentMessage: {
      //对象中的属性发生变化，deep（是深度监听）设为true
      deep: true,
      //执行监听到的数据v（从父组件异步过来的数据）
      handler(v) {
        this.loading = true
        this.getTenTypicalProduct(v)
      }
    }
  },
  created() {
    this.getTenTypicalProduct(0)
  },
  methods: {
    getTenTypicalProduct(type) {
      getTenTypicalProductPrice().then(res => {
        if (type === 0) {
          this.tableData = res.data[0]
        } else {
          this.tableData = res.data[1]
        }
        this.loading = false
      }) 
      
    }
  },
  
}
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
}

</style>